<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @input="input"
        @cancel="$router.back()"
      />
    </form>
    <ul>
      <li @click="handle(index)" v-for="(item, index) in list" :key="index">{{ item.communityName }}</li>
    </ul>
  </div>
</template>

<script>
import { searchArea } from '@/api/house'
export default {
  name: 'HmSearch',
  data () {
    return {
      value: '',
      list: [],
      community: '',
      communityName: ''
    }
  },
  methods: {
    async input () {
      if (this.value.length !== 0) {
        const res = await searchArea(
          this.value,
          JSON.parse(localStorage.getItem('cityInfo')).value
        )
        this.list = res.body
        // console.log(this.list)
      }
    },
    handle (index) {
      console.log(this.list)
      this.list.forEach((item, i) => {
        if (index === i) {
          this.community = item.community
          this.communityName = item.communityName
        }
      })
      this.$router.push(`/fangyuan/?communityName=${this.communityName}&community=${this.community}`)
    }
  }
}
</script>

<style scoped lang="less">
li {
  border-bottom: 1px solid #e2dcdc;
  padding: 15px 10px;
  font-size: 14px;
}
</style>
